<template>
    <div id="main" style="width: 1200px;height:800px;"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import { getStudentList } from '@/apis/student'
import { decryptAES } from '@/utils/jiemi'  // 解密方法



onMounted(async ()=>{
    let myChart = echarts.init(document.getElementById('main'));
    const option = {
    legend: {
        top: 'bottom'
    },
    toolbox: {
        show: true,
        feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
        }
    },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
                data: [
                    // 同步请求后端课程的信息
                    { value: JSON.parse(decryptAES((await getStudentList({ couresName: 'python基础核心语法' })).data,'123456')).total, name: 'python基础核心语法' },
                    { value: JSON.parse(decryptAES((await getStudentList({ couresName: 'python全栈开发' })).data,'123456')).total, name: 'python全栈开发' },
                    { value: JSON.parse(decryptAES((await getStudentList({ couresName: 'web前端全栈进阶班' })).data,'123456')).total, name: 'web前端全栈进阶班' },
                    { value: JSON.parse(decryptAES((await getStudentList({ couresName: 'web前端基础班' })).data,'123456')).total, name: 'web前端基础班' },
                    { value: JSON.parse(decryptAES((await getStudentList({ couresName: 'web前端基础班' })).data,'123456')).total, name: 'web前端基础班' }
                ],
            } 
        ]
    };
// 将配置传入容器中
    option && myChart.setOption(option);
    console.log(JSON.parse(decryptAES((await getStudentList({ couresName: 'python基础核心语法' })).data,'123456')).total);
})





</script>

<style lang="scss"></style>